<template>
  <!-- <button></button> -->
  <button
    class="el-button"
    @click="handleClick"
    :disabled="disabled"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[
      type ? 'el-button--' + type : '',
      size ? 'el-button--' + size : '',
      {
        'is-disabled': disabled,
        'is-loading': loading,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
      },
    ]"
  >
    <i class="el-icon-loading" v-if="loading"></i>
    <i :class="icon" v-if="icon && !loading"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script lang="ts">
import { ref, watch, computed } from 'vue';
// export default  {
//   name: 'xc-button',
//   props: {
//     type: {
//       type: String,
//       default: 'default',
//     },
//     size: String,
//     icon: {
//       type: String,
//       default: '',
//     },
//     nativeType: {
//       type: String,
//       default: 'button',
//     },
//     loading: Boolean,
//     disabled: Boolean,
//     plain: Boolean,
//     autofocus: Boolean,
//     round: Boolean,
//     circle: Boolean,
//   },
//   methods: {
//     handleClick(evt) {
//       this.$emit('click', evt);
//     },
//   },
//   created(){
//       var message:string = "Hello World"
//       console.log(message)
//   }
//};
export default {
  name: 'xc-button',
  props: {
    type: {
      type: String,
      default: 'default',
    },
    size: String,
    icon: {
      type: String,
      default: '',
    },
    nativeType: {
      type: String,
      default: 'button',
    },
    loading: Boolean,
    disabled: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    round: Boolean,
    circle: Boolean,
  },
  setup() {
    // 声明 count 变量，初始值为 0
    const count = ref(0);

    // 定义 add 方法
    const add = () => {
      count.value++;
    };

    // 定义 watch，需要手动引入 watch 方法
    watch(
      () => count.value,
      (val, oldVal) => {
        console.log(`new count: ${val}，old count: ${oldVal}`);
      }
    );

    // 定义computed，同样需要手动引入 computed 方法
    const doubleCount = computed(() => count.value * 2);
    function handleClick(evt) {
        console.log('点击事件: ', evt);
      this.$emit('click', evt);
    };
    return {
      count,
      add,
      doubleCount,
      handleClick
    };
  },
};
</script>
